<template>
	<view class="content">
		<view class="row car_title">
			<view class="col-14">
				<view class="row">
					<view class="col-24 price t_size_bold">
						{{orderDesc.orderAmount}}
					</view>
					<view class="col-24 price_name t_size_30">
						总金额（元）
					</view>
				</view>
			</view>
			<view class="col-4 t_right">
				<image src="../../static/trip/dh@2x.png" mode="heightFix"></image>
			</view>
			<view class="col-5 off-1 special t_size_26">
				{{orderDesc.orderTypeStr}}
			</view>
		</view>
		<view class="row definite">
			<view class="col-5 detailed set-19">
				<view class="name t_center t_size_34 t_size_bold">
					费用明细
				</view>
				<view class="img">
					<image src="../../static/index/user_bg.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="col-24 q_price">
				<view class="row t_size_29">
					<view class="col-12 t_size_bold">
						起步费
					</view>
					<view class="col-12 t_right">
						{{orderDesc.startAmount }}元
					</view>
				</view>
			</view>
			<view class="col-24 sc_price">
				<view class="row">
					<view class="col-12">
						<view class="row">
							<view class="col-24 t_size_bold">
								时长费（{{orderDesc.sumTime}}分钟）
							</view>
							<view class="col-24 sd_title">
								普通时段
							</view>
						</view>
					</view>
					<view class="col-12 t_right">
						{{orderDesc.millionAmount }}元
					</view>
				</view>
			</view>
		</view>
		<view class="row other">
			<view class="col-24">
				<view class="row">
					<view class="col-12 t_size_bold">
						等待费用
					</view>
					<view class="col-12 t_right">
						{{orderDesc.timeslotAmount }}元
					</view>
				</view>
			</view>
			<view class="col-24">
				<view class="row">
					<view class="col-12 t_size_bold">
						订单里程
					</view>
					<view class="col-12 t_right">
						{{orderDesc.sumMillion }}
					</view>
				</view>
			</view>
			<view class="col-24">
				<view class="row">
					<view class="col-12 t_size_bold">
						优惠金额
					</view>
					<view class="col-12 t_right">
						{{orderDesc.preferentialAmount}}元
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				orderId: 751,
				orderDesc: {
					millionAmount: 0,
					orderAmount : 0,
					orderType : 0,
					orderTypeStr : '',
					payAmount : 0,
					preferentialAmount : 0,
					startAmount : 0,
					sumMillion : 0,
					sumTime : 0,
					timeslotAmount : 0
				}
			}
		},
		onLoad(option) {
			this.orderId = option.orderId;
			this.load();
		},
		methods:{
			async load(){
				let res = await this.$api.request(this.$api.order.getpriceinfo,{orderId: this.orderId});
				// console.log(res)
				if(res){
					for(var key in this.orderDesc){
						this.orderDesc[key] = res[key];
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.content{
		width: 92%;
		padding: 5rpx 4%;
		.car_title{
			width: 90%;
			padding: 40rpx 5%;
			background: linear-gradient(270deg, #6CBF30 0%, #A8E77B 100%);
			box-shadow: 0 20rpx 40rpx 0 rgba(133, 208, 79, 0.5);
			border-radius: 20rpx;
			margin: 55rpx 0;
			.price{
				height: 80rpx;
				line-height: 80rpx;
				color: #FFFFFF;
				font-size: 52rpx;
			}
			.price_name{
				height: 40rpx;
				line-height: 40rpx;
				color: #FFFFFF;
			}
			image{
				height: 70rpx;
				border-radius: 35rpx;
				margin-top: 25rpx;
				border: 1px solid #FFFFFF;
			}
			.special{
				line-height: 120rpx;
				color: #333333;
			}
		}
		.definite{
			padding-bottom: 25rpx;
			border-bottom: 1px solid #EDEDED;
			.detailed{
				position: relative;
				height: 40rpx;
				line-height: 40rpx;
				padding: 11rpx 0;
				.name{
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 2;
				}
				.img{
					width: 100%;
					position: absolute;
					bottom: -19rpx;
					left: 0;
					z-index: 1;
					image{
						width: 100%;
					}
				}
			}
			.q_price{
				margin-top: 15rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #333333;
			}
			.sc_price{
				height: 90rpx;
				line-height: 45rpx;
				padding: 20rpx 0;
				color: #333333;
				.sd_title{
					color: #999999;
				}
			}
		}
		.other{
			padding-top: 30rpx;
			line-height: 80rpx;
			color: #333333;
		}
	}
</style>
